<template>
	<div class="page" @click="closePop">
		<!--<div style="min-height:900px">-->
		<!-- <div class="top">
			<div style="float: left">
				<span @click="goBack" class="goback">模板管理</span>　|　<span>编辑V5模板</span>
			</div>
			<el-button type="primary" size="small" id="goback" @click="goBack">返回</el-button>
		</div> -->
		<el-form :model="form" inline id="addform">
			<el-form-item label="模板名称:" :label-width="formLabelWidth">
				<el-input v-model="form.template_name" auto-complete="off" class="inpu" placeholder="输入模板名称"></el-input>
			</el-form-item>
			<el-form-item label="备注说明:" :label-width="formLabelWidth">
				<el-input v-model="form.remark" auto-complete="off" class="inpu mark"  type="text"
					placeholder="请输入说明内容"></el-input>
			</el-form-item>
			<el-form-item style="margin-top: 0.4rem">
				<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" inline class="demo-dynamic boxSensor">
					<el-form-item style="height: 0.9rem; line-height: 0.9rem">
						<el-button @click="addDomain" type="primary" size="small">新增数据点</el-button>
						<el-button @click="letOrder" type="primary" size="small">以列表顺序为排序</el-button>
						<!-- <el-button type="primary" size="small" v-if="!more" @click="showMore">显示附加属性</el-button>
						<el-button type="primary" size="small" v-else @click="hiddenMore">隐藏附加属性</el-button> -->
						<el-button type="success" size="small" @click="modifyMould">保存</el-button>
						<span class="tip">名称和地址必须唯一,名称用于显示和选择,地址用于数据传输,排序决定显示顺序。所有操作保存后才可生效。V5模板只能用于V5网关设备！</span>
					</el-form-item>
					<div class="sensorHead" ref="sensorHead">
						<span class="inpu_4" style="width: 0.8rem; height: 0.8rem">图标</span>
						<div class="inpu_4" style="width: 3.5rem">
							<span>名称</span><span class="sortIcon" style="cursor: pointer"><i
									class="el-icon-caret-bottom" @click="sortSensorNameDown"></i></span><span
								class="sortIcon" style="cursor: pointer"><i class="el-icon-caret-top"
									@click="sortSensorNameUp"></i></span>
						</div>
						<div class="inpu_4" style="width: 2.6rem">
							<span>地址</span><span class="sortIcon" style="cursor: pointer"><i
									class="el-icon-caret-bottom" @click="sortSensorKeyDown"></i></span><span
								class="sortIcon" style="cursor: pointer"><i class="el-icon-caret-top"
									@click="sortSensorKeyUp"></i></span>
						</div>
						<span class="inpu_4" style="width: 2.4rem">数值类型</span>
						<span class="inpu_4" style="width: 1.5rem">倍数</span>
						<span class="inpu_4" style="width: 1.5rem">偏置</span>
						<span class="inpu_4" style="width: 1.6rem">小数位</span>
						<span class="inpu_4" style="width: 1.4rem">阈值</span>
						<span class="inpu_4" style="width: 3.2rem">数据属性</span>
						<div class="inpu_4" style="width: 2rem">
							<span>单位</span>
							<el-tooltip placement="top" effect="light">
								<div slot="content" style="line-height: 0.4rem; color: red">
									注意事项:<br />为了体现专业化和减少占位长度以方便显示，尤其是手机端的显示，单位请使用数学写法，勿使用汉字！
								</div>
								<span class="sortIcon" style="color: red">!</span>
							</el-tooltip>
						</div>
						<div class="inpu_4" style="width: 2.5rem">
							<span>读写/显示</span><span class="sortIcon" style="cursor: pointer"><i
									class="el-icon-caret-bottom" @click="sortSensorTypeDown"></i></span><span
								class="sortIcon" style="cursor: pointer"><i class="el-icon-caret-top"
									@click="sortSensorTypeUp"></i></span>
						</div>
						<!-- <span class="inpu_4" style="width:3.5rem;">名称</span>
						<span class="inpu_4" style="width:2.6rem;">地址</span>
						<span class="inpu_4" style="width:3.0rem;">数据属性</span> -->
						<!-- <span class="inpu_4" style="width:2rem;">读写属性</span> -->
						<!-- <span class="inpu_4" style="width: 2.2rem">存储</span> -->
						<div class="inpu_4" style="width:2.2rem;">
							<span>存储</span>
							<el-tooltip placement="top" effect="light">
							  <div slot="content" style="line-height:0.4rem;color:red;">注意事项:<br/>如果选择不存储，该数据点将没有历史数据和历史曲线！</div>
							  <span class="sortIcon" style="color:red;">!</span>
							</el-tooltip>
						</div>
						<!-- <span class="inpu_4" style="width:2.4rem">单位</span> -->

						<!-- <span class="inpu_4" style="width:3.2rem">附加参数</span> -->
						<!-- <div class="inpu_4" style="width:3.6rem;" v-show="more">
							<span>附加参数</span>
							<el-tooltip placement="top" effect="light">
							  <div slot="content" style="line-height:0.4rem;">说明:<br/>1.目前只适用于多位开关,支持2至5个选项;<br/>2.长度限制：所有选项的名称加起来不超过16个汉字;<br/>3.格式：值:名称,值:名称，如："0:1档,1:2档,2:3档"</div>
							  <span class="sortIcon">?</span>
							</el-tooltip>
						</div> -->

						<!-- <div class="inpu_4" style="width:1.6rem;"><span>排序</span><span class="sortIcon"><i class="el-icon-caret-bottom" @click="sortSensorOrderDown"></i></span><span class="sortIcon"><i class="el-icon-caret-top" @click="sortSensorOrderUp"></i></span></div> -->
						<div class="inpu_4" style="width: 1.5rem">
							<span>排序</span>
							<el-tooltip placement="top" effect="light">
								<div slot="content" style="line-height: 0.4rem">
									支持的排序写法:<br />1.数字:如:0,1,2,3,...;<br />2.小写字母+数字:如:a1,a2,a3,...,b1,b2,b3,...
								</div>
								<span class="sortIcon">?</span>
							</el-tooltip>
						</div>
						<!-- <span class="inpu_4" style="width:1.6rem;">排序</span> -->
						<span class="inpu_4" style="width: 2.1rem">操作</span>
					</div>
					<div id="triBox" ref="triBox">
						<el-form-item v-for="(domain, index) in dynamicValidateForm.domains" class="oneDomain"
							ref="oneDomain" :key="index" :rules="{
                required: true,
                message: '数据点名称不能为空',
                trigger: ['blur', 'change'],
              }">
							<el-popover placement="top" width="210"
								style="z-index: 9999; height: 210px; line-height: 70px" trigger="manual"
								v-model="domain.visible">
								<img v-for="i in 18" :key="i" :src="baseurl + 'static/images/icon/icon' + i + '.png'"
									class="thumb" style="margin-left: 0.27rem; margin-bottom: 0.2rem" :id="i"
									@click="chooseIcon(i, index)" />
								<el-button slot="reference" class="icon_btn" @click="getIndex(index)"><img v-if="domain.icon" :id="index"
										:src="baseurl + domain.icon" class="thumb" /></el-button>
							</el-popover>
							<el-input class="inpu_3" style="width: 3.5rem" v-model="domain.sensor_name"
								placeholder="数据点名称" ></el-input>
							<el-input class="inpu_3" style="width: 2.4rem" v-model="domain.data_key" @input="addressValueType(domain.data_key,index)" placeholder="数据地址">
							</el-input>
							<el-select v-model="domain.value_type" class="inpu_3" style="width: 2.4rem"
								@change="changeValueType">
								<el-option v-for="item in domain.valueTypes" :key="item.value" :value="item.value"
									:label="item.label">
								</el-option>
							</el-select>
							<el-input class="inpu_3" style="width: 1.4rem" v-model="domain.magnification"
								placeholder="倍数"></el-input>
							<el-input class="inpu_3" style="width: 1.4rem" v-model="domain.value_offset"
								placeholder="偏置"></el-input>
							<el-select :disabled="domain.show_type > 2" v-model="domain.decimals" class="inpu_3"
								style="width: 1.4rem">
								<el-option v-for="item in points" :key="item.value" :value="item.value"
									:label="item.label">
								</el-option>
							</el-select>
							<el-input class="inpu_3" style="width: 1.4rem" v-model="domain.threshold" placeholder="阈值">
							</el-input>
							<el-select v-model="domain.report_type" placeholder="选择数据属性" class="inpu_3"
								style="width: 3rem" @change="changeReportEdit(domain)">
								<el-option v-for="item in reportTypes" :key="item.value" :value="item.value"
									:label="item.label">
								</el-option>
							</el-select>
							<el-input :disabled="domain.show_type > 2" class="inpu_3" style="width: 2rem"
								v-model="domain.unit" :placeholder="domain.show_type > 2 ? '非数值,禁用' : '单位,可无'"></el-input>
							<el-select v-if="domain.data_key[0]!='X'" v-model="domain.show_type" placeholder="读写/显示" class="inpu_3" style="width:2.5rem">
								<el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label">
								</el-option>
							</el-select>
							<el-select v-else v-model="domain.show_type" placeholder="读写/显示" class="inpu_3" style="width:2.5rem">
								<el-option v-for="item in optionsOnlyRead" :key="item.value" :value="item.value" :label="item.label">
								</el-option>
							</el-select>
							<!-- <el-select v-model="domain.read_write" placeholder="读写控制" class="inpu_3" style="width:1.8rem;">
								<el-option v-for="item in readWrites" :key="item.value" :value="item.value" :label="item.label">
								</el-option>
							</el-select> -->
							<el-select v-model="domain.save_type" placeholder="是否存储" class="inpu_3" style="width: 2rem">
								<el-option v-for="item in saves" :key="item.value" :value="item.value"
									:label="item.label">
								</el-option>
							</el-select>

							<!-- <el-input :disabled="domain.show_type!=6" class="inpu_3" maxlength="30" v-model="domain.ext_vars" :title="domain.ext_vars" placeholder="格式:0:1档,1:2档,2:3档" v-show="more"></el-input> -->

							<el-input class="inpu_3" style="width: 1.2rem" st v-model="domain.list_order"
								placeholder="排序"></el-input>
							<el-button @click.prevent="removeDomain(domain)" type="danger" size="mini">删除</el-button>
							<el-button @click.prevent="copyDomain(domain)" v-if="!reg645.test(domain.data_key)" type="primary" size="mini">复制</el-button>
						</el-form-item>
					</div>
				</el-form>
			</el-form-item>
		</el-form>
		<el-dialog :visible="dialogFormVisible" width="20%" append-to-body :show-close="close">
			<div class="toptit">
				<span>复制{{ copyitem.sensor_name }}</span>
				<span style="float: right; cursor: pointer" @click="dialogFormVisible = false">关闭</span>
			</div>
			<el-form :model="copyForm" style="text-align: left" inline>
				<el-form-item class="formline" label="数　　量:">
					<el-input class="inpu_3" style="width: 2rem" v-model="copyForm.num" placeholder="请输入数量"></el-input>
				</el-form-item><br />
				<!-- <el-form-item class="formline" label="地址间隔:">
					<el-select v-model="copyForm.step" placeholder="地址间隔" class="inpu_3" style="width: 2rem">
						<el-option v-for="item in steps" :key="item.value" :value="item.value" :label="item.label">
						</el-option>
					</el-select>
				</el-form-item><br /> -->
				<span style="color: red">注：单次限制3—100个</span>
			</el-form>
			<div style="text-align: right; margin-top: 0.2rem">
				<el-button type="success" size="small" @click="sureCopy">确 定</el-button>
				<el-button type="primary" size="small" @click="cancelCopy">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
    import {
        reportTypes,
        saves,
        options,
		optionsOnlyRead,
        points,
        valueTypes_IQ,
        valueTypes_MV,
        valueTypes_01,
        valueTypes_34,
		valueTypes_Fx_D,
		valueTypes_T645,
        padLeft,
		createDataKey
    } from '@/common.js';
    export default {
        name: "editMould",
        data() {
            return {
                id: 0,
                timeOne: new Date(2016, 9, 10, 18, 40),
                timeTwo: "",
                baseurl: this.$baseurl,
                timeThree: "",
                more: false,
                oneValue: true,
                twoValue: false,
                threeValue: false,
                num: 600,
                max: 0,
                isOrder: false,
                close: false,
                domainIndex: 0,
                copyitem: {},
                formLabelWidth2: "70px",
                formLabelWidth: "2.1rem",
                dialogFormVisible: false,
                dialogFormVisible_2: false,
                dialogVisible: false,
                copyForm: {
                    num: 3,
                    step: 1,
                },
                dynamicValidateForm: {
                    domains: [{
                        //key: new Date().getTime(),
                        sensor_name: "",
                        data_key: "",
                        show_type: 4,
                        value_type: 0,
                        //read_write: 1, //1只读，2读写
                        save_type: 2, //1存储，2不存储，3变化存储
                        unit: "",
                        //ext_vars:'',
                        report_type: 0,
                        magnification: 1,
                        value_offset: 0,
                        threshold: 0,
                        list_order: 0,
                        decimals: 0,
                        visible: false,
                        icon: "static/images/icon/icon1.png",
                    }, ],
                },
                reportTypes: reportTypes,
                reg645:/^[0-9]{4,8}$/,
				saves: saves,
                // readWrites: [{
                // 		value: 1,
                // 		label: "只读",
                // 	},
                // 	{
                // 		value: 2,
                // 		label: "读写",
                // 	},
                // ],
                options: options,
				optionsOnlyRead:optionsOnlyRead,
                points: points,

                //i,q区数值类型一样
                valueTypes_IQ: valueTypes_IQ,
                //m,v,db区数值类型一样
                valueTypes_MV: valueTypes_MV,
                //modBus的0区1区数值类型只有布尔型
                valueTypes_01: valueTypes_01,
                //modBus的3区4区数值类型
                valueTypes_34: valueTypes_34,
				valueTypes_Fx_D:valueTypes_Fx_D,
				valueTypes_T645:valueTypes_T645,
				//默认modBus的0区1区数值类型只有布尔型
                valueTypes: valueTypes_01,
                value: "",
                form: {
                    template_name: "",
                    remark: "",
                    id: 0,
                },
            };
        },
        created() {
            this.id = localStorage.getItem("editMouldId");
        },

        mounted() {
            this.getTemplate();
            this.tobottom();
        },

        methods: {
            changeReportEdit(domain) {
                if (domain.report_type == 1) {
                    domain.save_type = 2;
                }
            },

            // showMore() {
            // 	this.more = true;
            // 	this.$refs.triBox.style.width = "100%";
            // 	this.$refs.oneDomain.style.overflow = "visible";
            // 	this.$refs.triBox.style.overflow = "visible";
            // },

            // hiddenMore() {
            // 	this.more = false;
            // 	this.$refs.triBox.style.width = "100%";
            // 	this.$refs.oneDomain.style.overflow = "visible";
            // 	this.$refs.triBox.style.overflow = "auto";
            // },

            letOrder() {
                for (var i = 0; i < this.dynamicValidateForm.domains.length; i++) {
                    this.dynamicValidateForm.domains[i].list_order = i;
                }
                this.$message({
                    message: "排序已生成，按保存后生效",
                    type: "info",
                    center: true,
                });
            },
            sortNameUp(prop) {
                return function(obj1, obj2) {
                    var val1 = obj1[prop];
                    var val2 = obj2[prop];
                    // if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
                    //     val1 = Number(val1);
                    //     val2 = Number(val2);
                    // }
                    if (val1 < val2) {
                        return -1;
                    } else if (val1 > val2) {
                        return 1;
                    } else {
                        return 0;
                    }
                };
            },
            sortNameDown(prop) {
                return function(obj1, obj2) {
                    var val1 = obj1[prop];
                    var val2 = obj2[prop];
                    // if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
                    //     val1 = Number(val1);
                    //     val2 = Number(val2);
                    // }
                    if (val1 < val2) {
                        return 1;
                    } else if (val1 > val2) {
                        return -1;
                    } else {
                        return 0;
                    }
                };
            },
            sortSensorNameUp() {
                this.isOrder = true;
                this.dynamicValidateForm.domains = this.dynamicValidateForm.domains.sort(
                    this.sortNameUp("sensor_name")
                );
            },
            sortSensorNameDown() {
                this.isOrder = true;
                this.dynamicValidateForm.domains = this.dynamicValidateForm.domains.sort(
                    this.sortNameDown("sensor_name")
                );
            },
            sortSensorKeyUp() {
                this.isOrder = true;
                this.dynamicValidateForm.domains = this.dynamicValidateForm.domains.sort(
                    this.sortNameUp("data_key")
                );
            },
            sortSensorKeyDown() {
                this.isOrder = true;
                this.dynamicValidateForm.domains = this.dynamicValidateForm.domains.sort(
                    this.sortNameDown("data_key")
                );
            },
            sortSensorTypeUp() {
                this.isOrder = true;
                this.dynamicValidateForm.domains = this.dynamicValidateForm.domains.sort(
                    this.sortNameUp("type")
                );
            },
            sortSensorTypeDown() {
                this.isOrder = true;
                this.dynamicValidateForm.domains = this.dynamicValidateForm.domains.sort(
                    this.sortNameDown("type")
                );
            },
            sortSensorOrderUp() {
                this.isOrder = false;
                this.dynamicValidateForm.domains = this.dynamicValidateForm.domains.sort(
                    this.sortNameUp("list_order")
                );
            },
            sortSensorOrderDown() {
                this.isOrder = true;
                this.dynamicValidateForm.domains = this.dynamicValidateForm.domains.sort(
                    this.sortNameDown("list_order")
                );
            },

            repartValueType(firstKey,type) {
				//三菱fx协议对应地址规则专用正则
				let regFx=/^[XYMD][0-9]{4,5}$/;
				let reg645=/^[0-9]{4,8}$/;
				
				if(!regFx.test(firstKey) && !reg645.test(firstKey)){
					switch (type) {
						case '0':
						case '1':
							this.valueTypes = this.valueTypes_01;
							break;
						case '3':
						case '4':
							this.valueTypes = this.valueTypes_34;
							break;
						case 'I':
						case 'Q':
							this.valueTypes = this.valueTypes_IQ;
							break;
						case 'M':
						case 'V':
						case 'D':
							this.valueTypes = this.valueTypes_MV;
							break;
					}
				}else if(reg645.test(firstKey)){
					this.valueTypes = this.valueTypes_T645;
				}else if(regFx.test(firstKey)){
					//X,Y为八进制，M,D为十进制
					switch (type) {
						case 'X':
						case 'Y':
						case 'M':
						    this.valueTypes = this.valueTypes_01;
						    break;
						case 'D':
							this.valueTypes = this.valueTypes_Fx_D;
							break;
					}
				}
			},


            // //添加数据点时，数据通道变化引起数值类型选项变化；
            // chooseValueType(type) {
            // 	this.repartValueType(type);
            // 	this.addForm.value_type = this.valueTypes[0].value;
            // },

            //编辑数据点时，根据地址对应数值类型选项；
            addressValueType(address, i) {
                var type = address ? address[0] : '0';
				var reg=/^D[0]{5,}/;
				if(reg.test(address)){
					this.$message({
						type:'error',
						message:'输入地址不合法！'
					})
					return
				}
                this.repartValueType(address,type);
                this.dynamicValidateForm.domains[i].valueTypes = this.valueTypes;
                this.dynamicValidateForm.domains[i].value_type = this.valueTypes[0].value;
				if (['M', 'V', '0','Y'].indexOf(type) >= 0) {
					this.dynamicValidateForm.domains[i].show_type=this.options[3].value;
					this.dynamicValidateForm.domains[i].threshold = 1;
				} else if(type=='X'){
					this.dynamicValidateForm.domains[i].show_type=this.optionsOnlyRead[2].value;
					this.dynamicValidateForm.domains[i].threshold = 1;
				}else {
					this.dynamicValidateForm.domains[i].show_type = this.options[0].value;
					this.dynamicValidateForm.domains[i].threshold = 0;
				}
			},

            getTemplate() {
                var that = this;
				let regFx=/^[XYMD][0-9]{4}$/;
				let reg645=/^[0-9]{4,8}$/;
                this.$http({
                        method: "post",
                        url: "api/template/info",
                        data: {
                            id: this.id

                        }
                    })
                    .then((res) => {
                        if (res && res.data.result == "success") {
                            //console.log(res.data.data)
                            this.form = res.data.data;
                            this.dynamicValidateForm.domains = res.data.data.sensors;
                            for (var n = 0; n < this.dynamicValidateForm.domains.length; n++) {
                                this.$set(that.dynamicValidateForm.domains[n], "visible", false);
                                this.$set(that.dynamicValidateForm.domains[n], "valueTypes", []);
                                this.dynamicValidateForm.domains[n].list_order = Number(res.data.data.sensors[n].list_order) ? Number(res.data.data.sensors[n].list_order) : res.data.data.sensors[n].list_order;
                                var dataKey=res.data.data.sensors[n].data_key;
								var type = res.data.data.sensors[n].data_key ? res.data.data.sensors[n].data_key[0] : '0';
                                if(!regFx.test(dataKey) && !reg645.test(dataKey)){
									switch (type) {
										case '0':
										case '1':
										    this.dynamicValidateForm.domains[n].valueTypes = this.valueTypes_01;
										    break;
										case '3':
										case '4':
										    this.dynamicValidateForm.domains[n].valueTypes = this.valueTypes_34;
										    break;
										case 'I':
										case 'Q':
										    this.dynamicValidateForm.domains[n].valueTypes = this.valueTypes_IQ;
										    break;
										case 'M':
										case 'V':
										case 'D':
										    this.dynamicValidateForm.domains[n].valueTypes = this.valueTypes_MV;
										    break;
									}
								}else if(reg645.test(dataKey)){
									this.dynamicValidateForm.domains[n].valueTypes = this.valueTypes_T645;
								}else if(regFx.test(dataKey)){
									//X,Y为八进制，M,D为十进制
									switch (type) {
										case 'X':
										case 'Y':
										case 'M':
										    this.dynamicValidateForm.domains[n].valueTypes = this.valueTypes_01;
										    break;
										case 'D':
											this.dynamicValidateForm.domains[n].valueTypes = this.valueTypes_Fx_D;
											break;
									}
								}

                                this.dynamicValidateForm.domains[n].value_type = res.data.data
                                    .sensors[n].value_type ?
                                    Number(res.data.data.sensors[n].value_type) :
                                    0;
                                this.dynamicValidateForm.domains[n].show_type = res.data.data.sensors[
                                        n
                                    ].show_type ?
                                    Number(res.data.data.sensors[n].show_type) :
                                    1;
                            }

                        }
                    }).catch((error) => {
                        console.log(error);
                    });
            },

            changeValueType() {
                this.$forceUpdate();
            },

            copyDomain(item) {
                var that = this;
                this.dialogFormVisible = true;
                this.copyForm.step = 1;
                this.copyForm.num = 3;
                this.copyitem = item;
            },
            //排序有字母的累加算法；
            upListOrder(order, n) {
                let orderStr = order.toString();
                return (
                    orderStr.split(orderStr.replace(/[^0-9]/gi, "")).join("") +
                    (Number(orderStr.replace(/[^0-9]/gi, "")) + n + 1)
                );
            },

            //名称和地址有数字和非数字混杂(包括纯数字和纯非数字)的复制
            copyName(str, n) {
                // if(Number(str)){
                // 	//纯数字直接加1就可以了
                // 	return Number(str)+n;
                // }
                let strArr = str.split('');
                //非数字正则表达式；
                let reg = /\D/i;
                //var reg_2 = new RegExp("[\\u4E00-\\u9FFF]+","g");//中文正则
                let index = 0;
                //判断最后一个非数字字符的位置并记录,判断是否为0是为了键名的复制
                for (let m = 0; m < strArr.length; m++) {
                    if (reg.test(strArr[m])) {
                        index = m;
                    }
                }
                //console.log(index);
                //不包含停止位，所以要加1
                return str.substr(0, index + 1) + (Number(str.substr(index + 1)) + n);

            },

            sureCopy() {
                var that = this;
                var max = 0;
                var len = this.dynamicValidateForm.domains.length;
                for (var i = 0; i < len; i++) {
                    if (Number(that.dynamicValidateForm.domains[i].list_order)) {
                        max = max < Number(that.dynamicValidateForm.domains[i].list_order) ? Number(that.dynamicValidateForm.domains[i].list_order) : max;
                    }
                }

                if (this.copyForm.num >= 3 && this.copyForm.num <= 100) {
                    var addrAndKeys = createDataKey(
                        this.copyitem.data_key,
                        this.copyitem.value_type,
                        this.copyForm.num,
						false
                    );
                    for (var i = 0; i < this.copyForm.num; i++) {
                        that.dynamicValidateForm.domains.push({
                            sensor_name: that.copyitem.sensor_name == that.copyitem.data_key ? addrAndKeys[i].data_key : that.copyName(that.copyitem.sensor_name, i + 1),
                            data_key: addrAndKeys[i].data_key,
                            list_order: Number(max) ? Number(max) + i + 1 : that.upListOrder(max, i),
                            unit: that.copyitem.unit,
                            //ext_vars:that.copyitem.ext_vars,
                            decimals: that.copyitem.decimals,
                            icon: that.copyitem.icon,
                            report_type: that.copyitem.report_type,
                            magnification: that.copyitem.magnification,
                            value_offset: that.copyitem.value_offset,
                            valueTypes: that.copyitem.valueTypes,
                            threshold: that.copyitem.threshold,
                            visible: false,
                            show_type: that.copyitem.show_type,
                            value_type: addrAndKeys[i].value_type,
                            //read_write: that.copyitem.read_write,
                            save_type: that.copyitem.save_type,
                        });
                    }
                    setTimeout(function() {
                        that.tobottom();
                    }, 600);
                } else {
                    this.$message({
                        message: "数量超出范围,无法批量添加!",
                        type: "error",
                        center: true,
                    });
                }
                this.dialogFormVisible = false;
            },

            cancelCopy() {
                this.dialogFormVisible = false;
            },

            removeDomain(item) {
                var index = this.dynamicValidateForm.domains.indexOf(item);
                if (index !== -1) {
                    this.dynamicValidateForm.domains.splice(index, 1);
                }

            },

            addDomain() {
                var that = this;
                var max = 0;
                var len = this.dynamicValidateForm.domains.length;
                for (var i = 0; i < len; i++) {
                    if (Number(that.dynamicValidateForm.domains[i].list_order)) {
                        max = max < Number(that.dynamicValidateForm.domains[i].list_order) ? Number(that.dynamicValidateForm.domains[i].list_order) : max;
                    }
                }

                this.dynamicValidateForm.domains.push({
                    //key: new Date().getTime(),
                    sensor_name: "",
                    data_key: "",
                    show_type: 4,
                    valueTypes: that.valueTypes_01,
                    value_type: 0,
                    //read_write: 1,
                    save_type: 2,
                    unit: "",
                    //ext_vars:'',
                    report_type: 0,
                    magnification: 1,
                    sensor_trigger: [],
                    value_offset: 0,
                    threshold: 0,
                    decimals: 0,
                    icon: "static/images/icon/icon1.png",
                    list_order: Number(max) ? Number(max) + 1 : that.upListOrder(max, 0),
                    visible: false
                });
                setTimeout(function() {
                    that.tobottom();
                }, 500);
            },
            getIndex(ind) {
                this.domainIndex = ind;
                this.dynamicValidateForm.domains[ind].visible = true;
                event.stopPropagation();
            },
            closePop() {
                this.dynamicValidateForm.domains[this.domainIndex].visible = false;
                event.stopImmediatePropagation();
            },
            chooseIcon(id, ind) {
                var iconurl = "static/images/icon/icon" + id + ".png";
                this.dynamicValidateForm.domains[ind].icon = iconurl;
                this.dynamicValidateForm.domains[ind].visible = false;
            },
            changeNum(value) {
                console.log(value);
            },
            tobottom() {
                var content = document.getElementById("triBox");
                content.scrollTop = content.scrollHeight;
            },
            goBack() {
                // localStorage.setItem("show",true)
                this.$router.push({
                    path: "/mould",
                    name: "mould",
                    component: "mould",
                });
            },
            modifyMould() {
                var that = this;
                for (let i = 0, len = this.dynamicValidateForm.domains.length; i < len; i++) {
                    delete this.dynamicValidateForm.domains[i].valueTypes;
                    delete this.dynamicValidateForm.domains[i].value_types;
                    delete this.dynamicValidateForm.domains[i].visible;
                }
                this.$http({
                        method: "post",
                        url: "api/template/update",
                        data: {
                            template_name: this.form.template_name,
                            remark: this.form.remark,
                            sensors: this.dynamicValidateForm.domains,
                            id: this.form.id
                        },
                    })
                    .then((res) => {
                        if (res && res.data.result == "success") {
                            this.$message({
                                message: "恭喜,修改模板成功!",
                                type: "success",
                                center: true,
                            });
                            this.$router.go(-1);
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },
        },
    };
</script>

<style scoped>
    @media all and (max-width: 2560px) {
        .boxSensor {
            width: 75% !important;
            float: left !important;
            margin-top: -0.9rem !important;
            margin-left: 0.7rem !important;
        }
        #triBox {
            width: 100%;
            height: 19.6rem !important;
        }
    }
    
    @media all and (max-width: 1920px) {
        .boxSensor {
            width: 98% !important;
            float: left !important;
            margin-top: -0.9rem !important;
            margin-left: 0.7rem !important;
        }
        #triBox {
            width: 100% !important;
            height: 12.9rem !important;
            /* border:1px solid red; */
        }
    }
    
    @media all and (max-width: 1600px) {
        .boxSensor {
            width: 98% !important;
            float: left !important;
            margin-top: -0.9rem !important;
            margin-left: 0.4rem !important;
        }
        #triBox {
            width: 100% !important;
            height: 12.7rem !important;
            /* border:1px solid red; */
        }
        .sensorHead {
            margin-left: 0rem !important;
        }
        .mark {
            width: 19rem !important;
        }
        .oneDomain {
            margin-top: 0.2rem !important;
        }
        .dialog-footer {
            transform: translateY(-0.4rem) !important;
        }
    }
    
    @media all and (max-width: 1366px) {
        .boxSensor {
            margin-left: 0 !important;
        }
        .oneDomain {
            margin-top: 0.1rem !important;
        }
        #triBox {
            height: 12.2rem !important;
        }
    }
    
    .oneDomain>>>.el-input__inner {
        padding-left: 6px;
        padding-right: 2px;
    }
    
    .oneDomain>>>.el-select__caret {
        font-size: 12px;
    }
    
    .oneDomain>>>.el-input__icon {
        width: 14px;
    }
    
    #addform {
        text-align: left;
        margin-top: 0rem;
        width: 100%;
        /* border:1px solid red; */
    }
    
    .inpu {
        width: 5rem;
        vertical-align: middle;
        transform: translateY(0.2rem);
    }
    
    .inpu_3 {
        width: 3.5rem;
        margin-right: 0.1rem;
    }
    
	.tip {
        color: red;
        font-size: 14px;
        margin-left: 0.2rem;
    }
    
    .thumb {
        width: 0.8rem;
        height: 0.8rem;
        vertical-align: middle;
    }
    
    .icon_btn {
        width: 1rem;
        height: 0.8rem;
        /* line-height: 0.6rem; */
        vertical-align: middle;
        padding: 0;
        border: none;
    }
    
    #triBox {
        height: 12.9rem;
        overflow: auto;
        width: 100%;
        padding: 0;
        margin: 0;
        /* border:1px solid red; */
    }
    
    .oneDomain {
        width: 99%;
        /* margin-left: 0.1rem; */
        height: 0.98rem;
        line-height: 0.98rem;
        overflow: visible;
        white-space: nowrap;
    }
    
    .inpu_4 {
        display: inline-block;
        text-align: center;
		margin-left:0;
        /* margin-right:0.2rem; */
        border: 0 !important;
        font-size: 0.35rem;
    }
    
    .sensorHead {
        height: 0.7rem;
        line-height: 0.7rem;
        /* border:1px solid red; */
        width: 100%;
        border-bottom: 1px solid #111;
        margin: 0;
        padding: 0;
        white-space: nowrap;
        padding-left: 0.2rem;
    }
    
    .mark {
        width: 400%!important;
    }
</style>